<style lang="less">
@import '../../../styles/common.less';
</style>

<template>
    <Card style="height:800px">
        <Card>
            <header>
                <span> 证件号码:</span>
                <Input v-model="replacePayment.custIdNumber" style="width:150px" />
                <span style="width: 200px;margin-left: 20px;" > 姓名:</span>
                <Input v-model="replacePayment.custName" style="width:150px" />
                <span style="width: 200px;margin-left: 20px;" >贷款编号 :</span>
                <Input v-model="replacePayment.loanId" style="width:150px" />
                <Button type="primary" @click="listQuery()" style="margin-left: 20px;">查询</Button>
            </header>
        </Card>
        <Card>
            <Row type="flex" justify="center" align="middle" class="list-query">
                <Table border :columns="columns" :data="columnData" style="width: 100%;"></Table>
            </Row>

            <div class="replace-payment-review-bottom-page-div">
                <Page :total="replacePayment.total" :current="replacePayment.pageNum" :page-size="replacePayment.pageSize" size="small" show-elevator show-sizer show-total @on-change="pageChange" @on-page-size-change="sizeChange"></Page>
            </div>
        </Card>
        <Modal v-model="modal1" title="代还款审批通过" @on-ok="ok" @on-cancel="cancel" class="replace-payment-review-ivu-modal-content ">
            <div class="replace-payment-review-popup-style">
                <div class="replace-payment-review-font-style">实还金额：</div>
                <Input v-model="auditInfo.paymentAmountAct" style="width: 150px" />
            </div>

            <div class="replace-payment-review-popup-style">
                <div class="replace-payment-review-font-style"> 还款方式:</div>
                <div>
                    <Select v-model="auditInfo.paymentWay" class="v-select-wrapper" style="width:180px">
                        <Option v-for="item in paytmentWayList" :value="item.value" :key="item.value">{{ item.label}}</Option>
                    </Select>
                </div>
            </div>
        </Modal>

        <Modal v-model="modal2" title="代还款审批拒绝" @on-ok="ok2" @on-cancel="cancel2" class="replace-payment-review-ivu-modal-content ">
            <div class="replace-payment-review-popup-style">
                <div class="replace-payment-review-font-style">拒绝原因：</div>
                <Input v-model="auditInfo.remarks" style="width: 150px" />
            </div>
        </Modal>
    </Card>
</template>

<script>
export default {
  name: 'mutative-router',
  data () {
    return {
      modal1: false,
      modal2: false,
      replacePayment: {
        custName: '',
        custIdNumber: '',
        loanId: '',
        repaymentBeginDate: '',
        repaymentEndDate: '',
        repaymentStatus: '',
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      auditInfo: {
        paymentAmountAct: '',
        paymentWay: '',
        remarks: '',
        loanId: ''
      },
      columns: [
        {
          type: 'index',
          title: '序号',
          width: 60
        },
        {
          title: '客户姓名',
          key: 'custName',
          align: 'center'
        },
        {
          title: '身份证',
          key: 'custCardNo',
          align: 'center'
        },
        {
          title: '还款期数',
          key: 'currTenor',
          align: 'center'
        },
        {
          title: '资金方',
          key: 'fundName',
          align: 'center'
        },
        {
          title: '总欠款金额',
          key: 'amount',
          align: 'center'
        },
        {
          title: '实还金额',
          key: 'amountAct',
          align: 'center'
        },
        {
          title: '还款方式',
          key: 'paymentWay',
          align: 'center',
          render: (h, params) => {
            if (params.row.repaymentWays === '1') { // 对公转账
              return h('span', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '对公转账')
            }
            if (params.row.repaymentWays === '2') { // 支付宝转账
              return h('span', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '对公转账')
            }
          }
        },
        {
          title: '转账人姓名',
          key: 'transferCustName',
          align: 'center'
        },
        {
          title: '备注',
          key: 'remarks',
          align: 'center'
        },
        {
          title: '申请人姓名',
          key: 'applyUserName',
          align: 'center'
        },
        {
          title: '交易流水号',
          key: 'tradeSerialNumber',
          align: 'center'
        },
        {
          title: '操作',
          align: 'center',
          render: (h, params) => {
            var vm = this
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  'margin-left': '-13px'
                },
                on: {
                  click: () => {
                    vm.modal1 = true
                    vm.auditInfo.loanId = params.row.loanId
                  }
                }
              }, '通过'),
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  'float': 'right'
                },
                on: {
                  click: () => {
                    vm.modal2 = true
                    vm.auditInfo.loanId = params.row.loanId
                  }
                }
              }, '拒绝')
            ])
          }
        }
      ],
      paytmentWayList: [
        {
          value: '1',
          label: '对公转账'
        },
        {
          value: '2',
          label: '支付宝转账'
        }
      ],
      columnData: []
    }
  },
  created () {
    // 初始化当前页面请求对象实例
    this.$ajax = this.$util.ajax()
  },
  computed: {
    avatorImage () {
      return localStorage.avatorImgPath
    }
  },
  methods: {
    pageChange: function (pageNum) {
      var vm = this
      vm.listQueryCondition.pageNum = pageNum
      vm.listQuery()
    },
    sizeChange: function (pageLength) {
      var vm = this
      vm.listQueryCondition.pageSize = pageLength
      vm.listQuery()
    },
    listQuery () {
      var vm = this
      this.$ajax.post(this.$appContext.marvels_core_financial + 'financial/loan/replacePayment/service/paymentAuditList', this.replacePayment).then(re => {
        var data = re.data
        vm.columnData = data.data.list
        vm.replacePayment.total = data.data.total
      }).catch(er => {

      })
    },
    // 通过
    ok () {
      var vm = this
      this.$ajax.post(this.$appContext.marvels_core_financial + 'financial/loan/replacePayment/service/paymentAuditAdopt', this.auditInfo).then(re => {
        var data = re.data
        var message = data.message
        this.$Message.warning(message)
        vm.listQuery()
      }).catch(er => {

      })
    },
    cancel () {
      this.$Message.info('Clicked cancel')
    },
    // 拒绝
    ok2 () {
      var vm = this
      this.$ajax.post(this.$appContext.marvels_core_financial + 'financial/loan/replacePayment/service/paymentAuditRefuse', this.auditInfo).then(re => {
        var data = re.data
        var message = data.message
        this.$Message.warning(message)
        vm.listQuery()
      }).catch(er => {

      })
    },
    cancel2 () {
      this.$Message.info('Clicked cancel')
    }

  }
}
</script>
<style>
.replace-payment-review-bottom-page-div {
  margin-top: 120px;
  text-align: center;
}
.replace-payment-review-font-div {
  float: left;
  margin-left: 119px;
  text-align: center;
}
.replace-payment-review-common-div {
  float: left;
  margin-left: -168px;
  margin-top: 30px;
  width: 700px;
}

.replace-payment-review-top-div {
  margin-left: 50px;
  font-size: 20px;
  color: black;
  margin-top: 40px;
}
.replace-payment-review-popup-style {
  margin: 18px;
  width: 300px;
  margin-left: 27%;
  margin-top: 31px;
}
.replace-payment-review-font-style {
  float: left;
  margin-left: -88px;
  text-align: center;
}
.replace-payment-review-ivu-modal-content {
  position: relative;
  height: 337px;
  width: 133%;
  background-color: #fff;
  border: 0;
  border-radius: 6px;
  background-clip: padding-box;
}
</style>
